<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌套</title>
	<script src="./lib/vue-2.4.0.js"></script>
	<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
	<div id="app">
        <!-- 创建链接 -->
        <router-link to="/account">account</router-link>
        <router-view></router-view>     
	</div>

	<template id="templ">
	  <div>
	    <h1>这是Account组件</h1>
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>
        <router-view></router-view>
	  </div>
	</template>

	<script>
	    //创建account模板对象
	    var account={
	    	template:'#templ'
	    }
	    //创建login模板对象
	    var login={
	    	template:'<h1>我是登录组件</h1>'
	    }
	    //创建register模板对象
	    var register={
	    	template:'<h1>我是注册组件</h1>'
	    }

	    //创建路由对象
	    var routerObj=new VueRouter({
	    	routes:[
                {
                 path:'/account',
                 component:account
                 // children:[
                 //   {path:'login',component:login},
                 //   {path:'register',component:register}
                 // ]
                },

                {path:'/account/login',component:login},
                {path:'/account/register',component:register}
	    	]
	    })


        var vm=new Vue({
        	el:'#app',
        	data:{},
        	methods:{},
        	//Vue实例接收路由对象
        	router:routerObj
        });
	</script>
</body>
</html>

